import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    StatusBar,
    Linking,
    ActivityIndicator,
    DeviceEventEmitter,
    TextInput,
    Switch,
} from 'react-native';
import moment from 'moment'
import AndroidModule from 'src/utils/AndroidConnent'
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Constant from '../../utils/Constant'//全局变量
import Header from "../../components/header";
import { ToastToUser } from '../../utils/CustomToast';
import Loading from '../../utils/Loading';
import AlertCommonView from '../../components/Tool/AlertCommonView';



const screenW = Dimensions.get('window').width;
const isIos = Platform.OS == 'ios';

let pageSize = 20
let pageNo = 1;
let itemNo = 0;

export default class BankCardAddPage extends Component {

    constructor(props) {
        super(props);
        let bankCardInfo = this.props.route.params.bankCardInfo ? this.props.route.params.bankCardInfo : {}
        console.log('this.props.route.params.bankCardInfo = ', this.props.route.params.bankCardInfo)
        console.log('bankCardInfo = ', bankCardInfo.accountName)
        this.state = {
            id: bankCardInfo.id ? bankCardInfo.id : '',
            accountName: bankCardInfo.accountName ? bankCardInfo.accountName : '',
            accountNo: bankCardInfo.accountNo ? bankCardInfo.accountNo : '',
            accountBank: bankCardInfo.accountBank ? bankCardInfo.accountBank : '',
            isDefault: bankCardInfo.isDefault ? bankCardInfo.isDefault : 0,
            switchcolor: {
                false: '#e4e4e4',
                true: '#30bf47',
            },
            showAlertCommonView: false,
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    componentDidMount() {
        
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={this.state.id != '' ? '银行卡详情' : '添加银行卡'} hideSepLine={true} />

                <ScrollView style={{ flex: 1 }}>
                    <View style={{ height: 10 }} />
                    <View style={styles.itemBox}>
                        <Text style={styles.itemTitleText}>账户名称</Text>
                        <TextInput
                            autoCorrect={false}
                            editable={false}
                            autoCapitalize='characters'
                            style={styles.textInput}
                            placeholder={'请输入账户名称'}
                            placeholderTextColor="#999999"
                            value={this.state.accountName}
                            onChangeText={this.changeText.bind(this, 'accountName')}
                        />
                        <View style={styles.sepLine} />
                    </View>
                    <View style={styles.itemBox}>
                        <Text style={styles.itemTitleText}>银行卡号</Text>
                        <TextInput
                            autoCorrect={false}
                            editable={false}
                            autoCapitalize='characters'
                            style={styles.textInput}
                            placeholder={'请输入银行卡号'}
                            placeholderTextColor="#999999"
                            value={this.state.accountNo}
                            onChangeText={this.changeText.bind(this, 'accountNo')}
                        />
                        <View style={styles.sepLine} />
                    </View>
                    <View style={styles.itemBox}>
                        <Text style={styles.itemTitleText}>开户银行</Text>
                        <TextInput
                            autoCorrect={false}
                            editable={false}
                            autoCapitalize='characters'
                            style={styles.textInput}
                            placeholder={'请输入开户银行'}
                            placeholderTextColor="#999999"
                            value={this.state.accountBank}
                            onChangeText={this.changeText.bind(this, 'accountBank')}
                        />
                        <View style={styles.sepLine} />
                    </View>
                    <View style={[styles.itemBox, { height: 63, justifyContent: 'space-between' }]}>
                        <Text style={styles.itemTitleText}>设为默认</Text>
                        <Switch
                            style={{ transform: [{ scaleX: 1.0 }, { scaleY: 1.0 }] }}
                            value={this.state.isDefault == 1 ? true : false}
                            trackColor={this.state.switchcolor}
                            thumbColor='white'
                            onValueChange={(value) => {
                                this.valueChanged();
                            }}
                        >
                        </Switch>
                    </View>
                </ScrollView>

                {this.renderBottomBox()}

                <Loading onRef={(ref) => (this.Loading = ref)} />

                {
                    this.state.showAlertCommonView ?
                        <AlertCommonView
                            title={'提示'}
                            content={'是否删除该银行卡信息？'}
                            cancelBtnText={'取消'}
                            sureBtnText={'确定'}
                            cancelHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                            }}
                            sureHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                                this.deleteBankCard()
                            }}
                        />
                        :
                        null
                }

            </View>
        );
    }

    //输入框内容输入
    changeText(type, val) {
        this.setState({
            [type]: val
        })
    }

    valueChanged() {
        this.setState({
            isDefault: this.state.isDefault == 1 ? 0 : 1
        })
    }

    renderBottomBox() {
        return (
            <View style={[styles.bottomBox, { height: 70 + Constant.bottomHeight }]}>
                {
                    this.state.id != '' ?
                        <View style={styles.bottomBox1}>
                            <TouchableOpacity
                                style={styles.deleteBox}
                                onPress={() => {
                                    this.setState({
                                        showAlertCommonView: true
                                    })
                                }}
                            >
                                <Text style={styles.saveText}>删除</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.saveBox}
                                onPress={() => {
                                    this.submit()
                                }}
                            >
                                <Text style={styles.saveText}>提交</Text>
                            </TouchableOpacity>
                        </View>
                        :
                        <TouchableOpacity
                            style={styles.saveBox}
                            onPress={() => {
                                this.submit()
                            }}
                        >
                            <Text style={styles.saveText}>提交</Text>
                        </TouchableOpacity>
                }

            </View>
        )
    }

    submit() {

        

        if (this.state.accountName == '') {
            ToastToUser('请输入账户名称')
            return
        }
        if (this.state.accountNo == '') {
            ToastToUser('请输入银行卡号')
            return
        }
        if (this.state.accountBank == '') {
            ToastToUser('请输入开户银行')
            return
        }
        let params = {
            merchantId: Constant.userInfo.merchantId,
            accountName: this.state.accountName,
            accountNo: this.state.accountNo,
            accountBank: this.state.accountBank,
            isDefault: this.state.isDefault,
        }
        if (this.state.id != '') {
            params.id = this.state.id
        }
        this.Loading.show()
        HttpUtils.postRequest(this.state.id != '' ? HttpUrls.updateFinanceInfoAccount : HttpUrls.addFinanceInfoAccount, params).then((result) => {
            this.Loading.hide()
            if (result.code == 0) {
                ToastToUser(this.state.id != '' ? '修改成功' : '添加成功')
                setTimeout(() => {
                    if (this.props.route.params.completion) {
                        
                        this.props.route.params.completion()
                    }
                }, 500);
            } else {
                ToastToUser(result.msg ? result.msg : result.statusText)
            }
        }).catch((error) => {
            this.Loading.hide()
        });
    }

    deleteBankCard() {
        let params = {
            merchantId: Constant.userInfo.merchantId,
            id: this.state.id
        }
        this.Loading.show()
        HttpUtils.postRequest(HttpUrls.deleteFinanceInfoAccount, params).then((result) => {
            this.Loading.hide()
            if (result.data == 1) {
                ToastToUser('删除成功')
                setTimeout(() => {
                    if (this.props.route.params.completion) {
                        this.props.route.params.completion()
                    }
                }, 500);
            } else {
                ToastToUser(result.msg ? result.msg : result.statusText)
            }
        }).catch((error) => {
            this.Loading.hide()
        });
    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        backgroundColor: '#F9F9F9'
    },
    itemBox: {
        width: '100%',
        height: 54,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingHorizontal: 15,
        backgroundColor: '#fff',
    },
    itemTitleText: {
        width: 94,
        fontSize: 14,
        color: '#333'
    },
    textInput: {
        height: '100%',
        color: '#333333',
        fontSize: 14,
        flex: 1,
        // textAlignVertical: 'top',
        lineHeight: 18,
        
    },
    sepLine: {
        position: 'absolute',
        left: 15,
        right: 15,
        bottom: 0,
        backgroundColor: '#e4e4e4',
        height: 0.3
    },

    bottomBox: {
        backgroundColor: '#fff',
        width: '100%',
        paddingHorizontal: 15,
        flexDirection: 'row',
        paddingTop: 12,
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    bottomBox1: {
        width: '100%',
        height: 70,
        borderRadius: 23,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start'

    },
    deleteBox: {
        marginRight: 10,
        flex:1.2,
        height: 46,
        borderRadius: 23,
        backgroundColor: '#F5F5F5',
        justifyContent: 'center',
        alignItems: 'center'
    },
    saveBox: {
        flex:1.8,
        height: 46,
        borderRadius: 23,
        backgroundColor: '#FFE000',
        justifyContent: 'center',
        alignItems: 'center'
    },
    saveText: {
        fontSize: 16,
        color: '#333'
    }



})